import React, {Component,Fragment} from 'react';

import Layout from '&components/layout';

import { connect } from 'react-redux';

import { Table, Input, Button, Card } from 'antd';

import {SearchOutlined} from '@ant-design/icons'

import Highlighter from 'react-highlight-words';

import style from './styles.module.less';

import { Radar } from '@ant-design/charts';

// import MyRadar from './radar'
const data1 = [
  {item: "Design", user: "a", score: 70},
  {item: "Design", user: "b", score: 30},
  {item: "Development", user: "a", score: 60},
  {item: "Development", user: "b", score: 70},
  {item: "Marketing", user: "a", score: 50},
  {item: "Marketing", user: "b", score: 30},
]


const config = {
    data: data1,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
    meta: {
      score: {
        alias: '分数',
        min: 0,
        max: 80,
      },
    },
    xAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null,
          },
        },
      },
    },
    yAxis: {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null,
          },
        },
      },
    },
    // 开启面积
    area: {},
    // 开启辅助点
    point: {},
  };

class StudentAnalysis extends Component {
	render(){
		return(
			<Fragment>
        <div className={style.wrapper}>
          <div className={style.container}>
            <div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div>
            <div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div><div className={style.studentAnalysis}>
              <Card size="small" title="学生专业列表" hoverable style={{width:"100%",height:"100%"}} bodyStyle={{width:"100%",height:"100%"}}>
                <Radar {...config}></Radar>
              </Card>
            </div>
          </div>
        </div>
      </Fragment>
        
		)
	}
}

const mapStateToProps = (state) => { return {store: state.studentAnalysis}}
const mapDispatchToProps = dispatch => ({
  searchTextChange:dispatch.studentAnalysis.searchTextChange
})

export default connect(mapStateToProps,mapDispatchToProps)(StudentAnalysis);